<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>我的账本</a>
    <a><cite>水电总表</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-inline layui-show-xs-block">
            <select name="property">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class="layui-inline layui-show-xs-block">
            <select name="type">
              <option value="">类型</option>
              <option value="B">电费</option>
              <option value="C">水费</option>
            </select>
          </div>
          <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          </div>
        </form>
        <table class="layui-table" id="waterGrid" lay-filter="grid"></table>
        <table class="layui-table" id="electricityGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="barElectricity">
  <a class="layui-btn layui-btn-xs" lay-event="editElectricity"><i class="layui-icon">&#xe642;</i>修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delElectricity"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/html" id="barWater">
  {{#  if(d.received_mark == 'N'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="editWater"><i class="layui-icon">&#xe642;</i>修改</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="account"><i class="layui-icon">&#xe642;</i>到账</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delWater"><i class="layui-icon">&#xe640;</i>删除</a>
  {{#  } else { }}
  {{#  } }}
</script>
<script type="text/html" id="toolbarWater">
  <div class = "layui-btn-container" > 
      <button class = "layui-btn layui-btn-sm" lay-event="addWater">
        <i class="layui-icon"></i>抄总表</button>
  </div > 
</script>
<script type="text/html" id="toolbarElectricity">
  <div class = "layui-btn-container" > 
      <button class = "layui-btn layui-btn-sm" lay-event="addElectricity">
        <i class="layui-icon"></i>新增总表</button>
  </div > 
</script>

<script>
  layui.use(['table', 'form', 'laydate'], function () {
    var table = layui.table
      , laydate = layui.laydate
      , form = layui.form;

    //主表首次加载
    table.render({
      elem: '#electricityGrid'
      , url: './queryElectricity.html' //数据接口
      , toolbar: '#toolbarElectricity'
      , defaultToolbar: []
      , autoSort: false
      , cols: [[ //表头
        { field: 'id', title: 'ID', hide: true }
        , { field: 'name', title: '总表' }
        , { field: '', title: '操作', toolbar: '#barElectricity', minWidth: 356 }
      ]]
    });

    //表头工具栏事件 
    table.on('toolbar(grid)', function (obj) {
      switch (obj.event) {
        case 'addElectricity':
          var formData = form.val("formData");
          if (formData.property) {
            xadmin.open('新增总表', 'electricity.html?house_property_id=' + formData.property, '', '', true);
          }
          break;
        case 'addWater':
          var formData = form.val("formData");
          if (formData.property) {
            xadmin.open('抄总表', 'water.html?house_property_id=' + formData.property, '', '', true);
          }
          break;
      };
    });

    // 编辑、删除事件
    //监听行工具条
    table.on('tool(grid)', function (obj) {
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      switch (layEvent) {
        case 'editElectricity':
          xadmin.open('编辑总表', 'electricity.html?id=' + data.id + '&house_property_id=' + data.house_property_id, '', '', true);
          break;
        case 'editWater':
          var formData = form.val("formData");
          xadmin.open('编辑总表明细', 'water.html?id=' + data.id + '&house_property_id=' + formData.property, '', '', true);
          break;
        case 'delElectricity':// 删除
          layer.confirm('确认要删除吗？', function () {
            main.ajaxPost(
              {
                url: "{:url('delElectricity')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('electricityGrid'); //只重载数据
              }
            )
          });
          break;
        case 'delWater':// 删除
          layer.confirm('确认要删除吗？', function () {
            main.ajaxPost(
              {
                url: "{:url('delWater')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('waterGrid'); //只重载数据
              }
            )
          });
          break;
        case 'account':// 到账
          layer.confirm(data.electricity_name + '的' + data.master_sum + '元已到账？', {
            btn: ['确定'] //按钮
          }, function () {
            main.ajaxPost(
              {
                url: "{:url('account')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('waterGrid'); //只重载数据
              }
            );
          });
          break;
      };
    });

    // 明细表
    table.render({
      elem: '#waterGrid'
      , height: '367px'
      , url: './queryWater.html' //数据接口
      , toolbar: '#toolbarWater'
      , defaultToolbar: []
      , page: true //开启分页
      , autoSort: false
      , cols: [[ //表头
        { field: 'id', title: 'ID', hide: true }
        , { field: 'electricity_name', title: '总表', minWidth: 118 }
        , { field: 'end_month', title: '月份' }
        , { field: 'master_sum', title: '总金额' }
        , { field: 'detail_sum', title: '分金额' }
        , { field: 'master_dosage', title: '总用量' }
        , { field: 'detail_dosage', title: '分用量' }
        , { field: '', title: '操作', toolbar: '#barWater', minWidth: 244 }
      ]]
    });

    form.on('submit(sreach)', function (data) {
      var data = data.field;
      table.reload('waterGrid', {
        url: './queryWater.html'
        , where: {
          "house_property_id": data.property,
          "type": data.type
        }
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
          curr: 1
        }
      }); //只重载数据

      table.reload('electricityGrid', {
        url: './queryElectricity.html'
        , where: {
          "house_property_id": data.property,
          "type": data.type
        }
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
          curr: 1
        }
      }); //只重载数据
      return false;
    });
  });
</script>